<template>
  <div class="content">
    <el-button type="primary" @click="handleEditForm">新增 </el-button>
    <el-table
      v-loading="loading"
      :data="list"
      :header-cell-style="tableOptions.headStyle"
      class="table"
    >
      <el-table-column type="selection" />
      <el-table-column
        prop="id"
        label="活动ID"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="activityName"
        label="活动名称"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="activityUrl"
        label="活动链接"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span v-if="scope.row.activityUrl">{{ scope.row.activityUrl }} </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="beginningAndEndingTime"
        label="活动起止时间"
        width="180"
        :formatter="(row) => row.startTime + ' - ' + row.endTime"
      />
      <el-table-column prop="status" label="状态" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.state === 0" type="warning">未开始 </el-tag>
          <el-tag v-if="scope.row.state === 1" type="success">进行中 </el-tag>
          <el-tag v-if="scope.row.state === 2" type="danger">已结束 </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="publishCount" label="活动发放总数" width="180" />

      <el-table-column prop="releaseCount" label="已发放总数" width="180" />
      <el-table-column prop="address" label="操作" width="320" fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleCopeLink(scope.row)"
          >复制链接
          </el-button>
          <el-button
            type="warning"
            size="small"
            @click="handleEditForm(scope.row, true)"
          >详情
          </el-button>
          <el-button
            v-if="scope.row.state === 0"
            type="warning"
            size="small"
            @click="handleEditForm(scope.row)"
          >编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="queryOptions.page"
      :page-size="queryOptions.pageSize"
      :page-sizes="tableOptions.pageSizes"
      :total="tableOptions.total"
      @size-change="(val) => handlePageChange(val, 1)"
      @current-change="(val) => handlePageChange(val, 2)"
    />

    <ActiveForm v-model="showForm" :item="formItem" @confirm="handleGetTable" />
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import ActiveForm from './form.vue'
import { getAll, del } from '@/api/channelActivity'

const showForm = ref(false)
const formItem = ref({})
const loading = ref(false)
const list = ref([])
const queryOptions = ref({
  page: 1,
  pageSize: 10,
})
const tableOptions = ref({
  headStyle: { background: '#EEF3FF', color: '#333333' },
  pageSizes: [5, 10, 30, 50, 100],
  total: 0,
})

onBeforeMount(() => {
  handleGetTable()
})

const handleGetTable = async () => {
  loading.value = true
  const { data } = await getAll(queryOptions.value)
  list.value = data.list
  tableOptions.value.total = data.total
  loading.value = false
}
/**
 * 分页
 * @param val
 * @param type 1page 2pageSize
 */
const handlePageChange = (val, type) => {
  type === 1
    ? (queryOptions.value.page = val)
    : (queryOptions.value.pageSize = val)
  handleGetTable()
}
const handleEditForm = (item, isLook = false) => {
  if (!item.id) {
    formItem.value = {}
  } else {
    formItem.value = item
    if (isLook) {
      formItem.value.isLook = true
    } else {
      formItem.value.isLook = false
    }
  }
  showForm.value = true
}
const handleCopeLink = (item) => {
  const htmlInputElement = document.createElement('input')
  htmlInputElement.value = item.activityUrl
  document.body.appendChild(htmlInputElement)
  htmlInputElement.select()
  document.execCommand('copy')
  document.body.removeChild(htmlInputElement)
  ElMessage.success('复制成功')
}
const handleDelete = (item) => {
  const message = `是否删除活动${item.activityName}`
  ElMessageBox.confirm(message, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      // 删除逻辑
      loading.value = true
      await del({ id: item.id })
      handleGetTable()
      ElMessage({
        type: 'success',
        message: '删除成功!',
      })
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20px;

  .table {
    margin: 20px 0;
  }
}
</style>
